import React, { useEffect, useState } from 'react';
import { Graph, DataUri } from '@antv/x6';
import { Button } from 'antd';
export default function index() {
  const [graph, setGraph] = useState<Graph | null>(null);
  const [show, setShow] = useState<Boolean>(false);
  const data = {
    // 节点
    nodes: [
      {
        id: 'node1', // String，可选，节点的唯一标识
        x: 40, // Number，必选，节点位置的 x 值
        y: 40, // Number，必选，节点位置的 y 值
        width: 80, // Number，可选，节点大小的 width 值
        height: 40, // Number，可选，节点大小的 height 值
        label: 'hello', // String，节点标签
      },
      {
        id: 'node2', // String，节点的唯一标识
        x: 160, // Number，必选，节点位置的 x 值
        y: 180, // Number，必选，节点位置的 y 值
        width: 80, // Number，可选，节点大小的 width 值
        height: 40, // Number，可选，节点大小的 height 值
        label: 'world', // String，节点标签
      },
    ],
    // 边
    edges: [
      {
        source: 'node1', // String，必须，起始节点 id
        target: 'node2', // String，必须，目标节点 id
      },
    ],
  };
  useEffect(() => {
    markgraph();
  }, []);
  // 画布是否可以平移
  const isPannable = () => {
    console.log((graph as Graph).isPannable());
  };
  // 启用画布平移
  const enablePan = () => {
    (graph as Graph).enablePanning();
  };
  // 禁止画布平移
  const disablePan = () => {
    (graph as Graph).disablePanning();
  };
  // 切换画布平移状态
  const togglePan = () => {
    (graph as Graph).togglePanning();
  };
  // 画布内容居中
  const centerContent = () => {
    (graph as Graph).centerContent();
  };
  //画布缩放
  const zoom = (num: number) => {
    (graph as Graph).zoom(num);
    console.log('目前缩放级别:', (graph as Graph).zoom());
  };
  //导出SVG
  const toSvg = () => {
    (graph as Graph).toSVG(
      (dataUri: string) => {
        // 下载
        DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), 'chart.svg');
      },
      {
        preserveDimensions: {
          width: 100,
          height: 100,
        },
        stylesheet: `
          rect {
            fill: red;
          }`,
        beforeSerialize: (svg: SVGSVGElement) => {
          console.log('我执行了svg导出:', svg);
        },
      },
    );
  };
  //导出PNG
  const toPng = () => {
    (graph as Graph).toPNG(
      (dataUri: string) => {
        // 下载
        DataUri.downloadDataUri(dataUri, 'chart.png');
      },
      {
        width: 300,
        height: 300,
        backgroundColor: 'red',
        padding: {
          top: 50,
          right: 50,
          bottom: 50,
          left: 50,
        },
      },
    );
  };
  //销毁画布
  const dispose = () => {
    if (!show) {
      console.log('未创建画布，无法销毁');
      return;
    }
    (graph as Graph).dispose();
    setShow(false);
  };
  //生成画布
  const markgraph = () => {
    if (show) {
      console.log('未生成画布，无需重复创建');
      return;
    }
    //创建画布
    const graph = new Graph({
      container: document.getElementById('container') as HTMLElement,
      height: 600,
      background: {
        color: '#fffbe6', // 设置画布背景颜色
      },
      grid: {
        size: 10, // 网格大小 10px
        visible: true, // 渲染网格背景
      },
      panning: {
        enabled: true,
        modifiers: 'shift', //按住shift键并点击鼠标才能触发画布拖拽
      },
    });
    //数据渲染
    (graph as Graph).fromJSON(data);
    setGraph(graph);
    setShow(true);
  };

  return (
    <div>
      <div>
        <Button onClick={isPannable}>画布是否可以平移</Button>
        <Button onClick={enablePan}>启用画布平移</Button>
        <Button onClick={disablePan}>禁止画布平移</Button>
        <Button onClick={togglePan}>切换画布平移状态</Button>
        <br />
        <Button onClick={() => zoom(0.2)}>在原来缩放级别上增加 0.2</Button>
        <Button onClick={() => zoom(-0.2)}>在原来缩放级别上减少 0.2</Button>
        <Button onClick={centerContent}>画布内容居中</Button>
        <br />
        <Button onClick={toSvg}>导出SVG</Button>
        <Button onClick={toPng}>导出PNG</Button>
        <br />
        <Button onClick={markgraph}>生成画布</Button>
        <Button onClick={dispose}>销毁画布</Button>
      </div>
      <div id="container"></div>
    </div>
  );
}
